<script setup lang="ts">
  import Header from './components/Header.vue'
  import List from './components/List.vue'
  import Footer from './components/Footer.vue'
  import { onMounted, ref, watch } from 'vue';
  import type { Todo, Todos } from './types';
  import { readTodos, saveTodos } from '@/utils/storageUtils';


  const todos = ref<Todos>([])

  function addTodo(todo: Todo) {
    todos.value.unshift(todo)
  }

  function deleteTodo(id: number) {
    todos.value = todos.value.filter(todo => todo.id !== id)
  }

  function toggleTodo(todo: Todo) {
    todo.completed = !todo.completed
  }

  function clearCompletedTodos() {
    todos.value = todos.value.filter(todo => !todo.completed)
  }

  function checkAll(isCheck: boolean) {
    todos.value.forEach(todo => todo.completed = isCheck)
  }

  onMounted(() => {
    // 模拟异步读取数据
    setTimeout(() => {
      // 读取local中保存的todos, 更新数据
      todos.value = readTodos()
    }, 1000);
  })

  watch(todos, (value) => {
    saveTodos(value)
  }, { deep: true })

</script>


<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo" />
      <List :todos="todos" :deleteTodo="deleteTodo" :toggleTodo="toggleTodo" />
      <Footer :todos="todos" :clearCompletedTodos="clearCompletedTodos" :checkAll="checkAll"></Footer>
    </div>
  </div>
</template>


<style>
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}
</style>
<style scoped>
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>